<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>我的团队 | {$xiarikui_config['shop_info_store_title']}</title>
        <link rel="stylesheet" type="text/css" href="__MOBILE__/static/aui/css/aui.2.0.css" />
        <link rel="stylesheet" type="text/css" href="__MOBILE__/static/css/public.css">
        <link rel="stylesheet" type="text/css" href="__MOBILE__/static/css/distributionStyle.css">
        <script src="__PUBLIC__/js/global.js"></script>
        <script src="__PUBLIC__/js/mobile_common.js"></script>
        <script src="__MOBILE__/js/common.js"></script>
    </head>

    <body>
        <article class="myteam_header">
            <header class="aui-bar aui-bar-nav aui-bar-light" style="height:1rem;">
                <a href="javascript:history.back(-1)" class="aui-pull-left aui-btn">
                    <span class="aui-iconfont aui-icon-left" style="color: #000"></span>
                </a>
                <div class="aui-title color_black">我的团队({$first_count+$second_count+$third_count})</div>
            </header>
        </article>
        <section class="myteam_btn_group">
            <div class="aui-bar aui-bar-btn aui-margin-t-10 aui-margin-b-10" style="width:96%;">
                <notempty name='second_count'>
                    <div class="aui-bar-btn-item aui-active" id="one_level">一级({$first_count|default=0})</div>
                    <div class="aui-bar-btn-item" id="two_level">二级({$second_count|default=0})</div>
                    <else/>
                    <div class="aui-bar-btn-item aui-active" id="one_level">一级({$first_count|default=0})</div>
                </notempty>
                <!--<div class="aui-bar-btn-item" id="three_level">白银({$third_count|default=0})</div>-->
            </div>
        </section>
        <section class="myteam_content">
            <article class="aui-bar aui-bar-nav">
                <div class="aui-pull-left">成员信息</div>
                <div class="aui-pull-right">
                    <!--<span>TA的佣金/成员</span>-->
                </div>
            </article>
            <section class="myteam_member" id="for_one_level">
            </section>
            <section class="myteam_member" id="for_two_level">
            </section>
            <!--        <section class="myteam_member" id="for_three_level">
                    </section>-->
        </section>
        <img class="first_ajax_img" src="__MOBILE__/static/images/ajax-loader2.gif">
        <div class="loading" style="display: none;"><img src="__MOBILE__/static/images/ajax-loader2.gif">loading..</div>
        <input id="first" type="hidden" value="{$first_count|default=0}">
        <input id="second" type="hidden" value="{$second_count|default=0}">
        <input id="third" type="hidden" value="{$third_count|default=0}">
        <div style="width: 100%;height: 5rem;"></div>
    <include file="Public/myfooter" />
    <script type="text/javascript" src="__MOBILE__/static/js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="__MOBILE__/static/js/publicScripts.js"></script>
    <script type="text/javascript" src="__MOBILE__/static/aui/script/aui-scroll.js"></script>
    <script type="text/javascript" src="__MOBILE__/static/aui/script/aui-toast.js"></script>
    <script type="text/javascript">
        //弹层提示
        var toast = new auiToast(); //实例化toast插件
        function getToast(type) {
            switch (type) {
                case "none":
                    toast.custom({
                        title: "无加载数据",
                        html: '<img style="width:80%;" src="__MOBILE__/static/images/ajax-loader2.gif">',
                        duration: 1000
                    });
                    break;
                default:
                    break;
            }
        }
        /*
         *初始化并加载数据
         *level_id String append到的容器class名称
         *level_num String 几级菜单
         *level_count Num 该级菜单的列表数目
         */
        function levelAjax(level_id, level_num, level_count) {
            $("#" + level_id).html(""); //点击清楚页面准备重新加载
            $(".first_ajax_img").show(); //加载gif
            $.ajax({
                url: "{:U('AppDistribut/ajaxMyTeam')}",
                type: 'GET',
                dataType: 'html',
                data: {
                    level: level_num,
                    teamCount: level_count
                },
                success: function (data) {
                    $(".first_ajax_img").hide(); //gif
                    $("#" + level_id).append(data);
                }
            });

            var page = 2;
            var isAjax = false; //防止正在Ajax请求时再次触发上拉加载

            var scroll = new auiScroll({
                listen: false, //是否监听滚动高度，开启后将实时返回滚动高度
                distance: 50 //判断到达底部的距离，isToBottom为true
            }, function (ret) {

                if (isAjax) {
                    return false;
                }

                if (ret.isToBottom) {
                    $(".loading").show();
                    isAjax = true;
                    // setTimeout(function() {
                    $.ajax({
                        url: "/index.php?m=Mobile&c=AppDistribut&a=ajaxMyTeam&p=" + page,
                        type: 'GET',
                        dataType: 'html',
                        data: {
                            level: level_num,
                            teamCount: level_count
                        },
                        success: function (data) {
                            if (data) {
                                $(".loading").hide();
                                $("#" + level_id).append(data);
                                page++;
                                isAjax = false;
                            } else {
                                isAjax = true; //没有数据了就阻止下次滚动触发ajax
                                $(".loading").hide();
                                getToast("none");
                            }

                        }
                    });

                    // }, 1000);
                }
            });
        }

        //菜单点击变换样式并调用levelAjax()
        function levelActive() {
            var items = $("div.aui-bar-btn-item[id$='level']");
            items.click(function () {

                $(this).siblings('div.aui-bar-btn-item').removeClass('aui-active').end()
                        .addClass('aui-active');

                var level = $(this).prop('id');
                $("section.myteam_member[id$='level']").hide();
                $("#for_" + level).show();


                if (level == "one_level") {
                    levelAjax("for_one_level", "1", $("#first").val());
                } else if (level == "two_level") {
                    levelAjax("for_two_level", "2", $("#second").val());
                } else if (level == "three_level") {
                    levelAjax("for_three_level", "3", $("#third").val());
                }

            });
        }

        $(function () {
            levelActive();
            // 进入页面模拟点击一级菜单
            $("div.aui-bar-btn-item[id='one_level']").trigger('click');

        });


        //申请
        function ajaxApplyDistribut(apply_id) {
            var toast = new auiToast(); //实例化toast插件
            $.ajax({
                url: "{:U('Mobile/AppDistribut/ajaxApply')}",
                type: 'post',
                dataType: 'json',
                data: {
                    apply_id: apply_id
                },
                success: function (data) {
                    if (data.status) {
                        toast.success({
                            title: data.msg,
                            duration: 2000
                        });
                    } else {
                        toast.fail({
                            title: data.info,
                            duration: 1000
                        });
                    }
                    location.href = data.url;
                }
            });
        }
    </script>
</body>

</html>
